<template>
	<view>
		<statusBar></statusBar>
		<view class="header">
			<!-- head left -->
			<view @tap="message"><image src="../../static/assert/xiaoxi.png" class="drawer-icon"></image></view>
			<view>
				<text class="symbol-text">DUPONT</text>
			</view>
			<view></view>
			
		</view>
		<!-- 轮播图 -->
		<view class="page-section-spacing">
			<swiper :style="{ height: swierHeight + 'px' }" class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item><image style="width: 100%;height: 366upx;" src="../../static/assert/banner1.jpg" mode=""></image></swiper-item>
				<swiper-item><image style="width: 100%;height: 366upx;" src="../../static/assert/banner2.jpg" mode=""></image></swiper-item>
				<swiper-item><image style="width: 100%;height: 366upx;" src="../../static/assert/banner3.jpg" mode=""></image></swiper-item>
			</swiper>
		</view>
		
		<!-- 通知 -->
	<!-- 	<view class="notice-one">
			<view class="image-one"><image src="../../static/assert/tongzhi.png" mode=""></image></view>
			<view class="chargeone">
				<swiper
					class="_swiper tc"
					@change="slideChange"
					:indicator-dots="false"
					autoplay="true"
					:interval="4000"
					circular="true"
					display-multiple-items="2"
					:duration="8000"
					:circular="true"
					@tap="$nav('./notice/announcement')"
				>
					<swiper-item><view class="swiper-item"></view></swiper-item>
					<swiper-item><view class="swiper-item"></view></swiper-item>
					
				</swiper>
			</view>
		</view> -->

		<!-- 总资产 -->
		<!-- <view class="assert">
			<view class="assert-one">
				<view class="assert-one1">
					 充值
				</view>
			</view>
			<view class="assert-two"></view>
			<view class="assert-free"></view>
		</view> -->
		
		<!-- 法币交易 -->
		<view class="Fiatdeal">
			<!-- 左边 -->
			<view @tap="side" class="Fiatdeal-left">
				<view>{{ lang.transactions }}</view>
				<view><image src="../../static/assert/shijian.png" mode=""></image></view>
			</view>
			<!-- 右边 -->
			<view class="Fiatdeal-right">
				<view @tap="$nav('./notice/activity')">
					<view><image src="../../static/assert/xiangmu.png" mode=""></image></view>
					<view>{{ lang.Projectcenter }}</view>
				</view>
				<view @tap="$nav('/pages/mein/Helpcenter')">
					<view><image src="../../static/assert/banzu.png" mode=""></image></view>
					<view>{{ lang.Helpcenter }}</view>
				</view>
			</view>
		</view>

		<!-- 币种 限价列表 -->
		
		<view class="container">
			<!-- 币种列表 -->
			<marketList :marketList="marketList"></marketList>
		</view>
	</view>
</template>

<script>
import request from '@/utils/request';
import { mapActions, mapGetters, mapState, mapMutations } from 'vuex';
import marketList from '../../components/marketList.vue';
import $ from 'jquery';
export default {
	data() {
		return {
			symbol: '行情',
			chzh: false,
			ench: false,
			marketList: ['BTCUSDT', 'ETHUSDT', 'LTCUSDT', 'HS300', 'IC500'],
			motherCoinNames: [],
			current: 1,
			timer: null,		
			interverFlag: false,
			background: ['color1', 'color2', 'color3'],
			indicatorDots: false,
			autoplay: true,
			interval: 2000,
			duration: 500,
			flag: true,
			msgList: [],
		};
	},
	created() {
		let that = this;
		that.getNowPrice1();
		that.getNowPrice2();
		that.getNowPrice3();
		that.getNowPrice4();
		that.getNowPrice5();
		setInterval(() => {
			that.getNowPrice1();
			that.getNowPrice2();
			that.getNowPrice3();
			that.getNowPrice4();
			that.getNowPrice5();
		}, 5000);
	},
	onShow() {
		
	},
	async onLoad() {},

	mounted() {
		this.flags();
	},

	computed: {
		...mapState(['lang']),
		...mapState('user', ['userinfo']),
		...mapState('user', ['BTCUSDT']),
		...mapState('user', ['ETHUSDT']),
		...mapState('user', ['LTCUSDT']),
		...mapState('user', ['HS300USDT']),
		...mapState('user', ['IC500USDT']),
		swierHeight() {
			return uni.getSystemInfoSync().windowHeight;
		}
	},

	components: {
		marketList
	},
	onNavigationBarButtonTap(e) {
		switch (e.index) {
			case 0:
				break;
			case 1:
				this.$nav('./search');
				break;
		}
	},
	onUnload() {
		// clearInterval(this.timer);
	},

	methods: {
		// 获取最新价格
		getNowPrice1() {
			var that = this;
			function callbackparam(res) {}
			$.ajax({
				type: 'GET',
				url: 'https://line.dupont-ex.com/getdatahis.ashx',
				contentType: 'application/json',
				data: {
					symbol: that.marketList[0],
					type: 'today'
				},
				async: false,
				dataType: 'jsonp',
				jsonp: 'callbackparam',
				success: function(data) {
					// console.log(data.TodayClosePrice);
					that.$store.commit('user/BTCUSDT', data.TodayClosePrice);
					
					
				}
			});
		},
		getNowPrice2() {
			var that = this;
			function callbackparam(res) {}
			$.ajax({
				type: 'GET',
				url: 'https://line.dupont-ex.com/getdatahis.ashx',
				contentType: 'application/json',
				data: {
					symbol: that.marketList[1],
					type: 'today'
				},
				async: false,
				dataType: 'jsonp',
				jsonp: 'callbackparam',
				success: function(data) {
					// console.log(data.TodayClosePrice);
					that.$store.commit('user/ETHUSDT', data.TodayClosePrice);
				}
			});
		},
		getNowPrice3() {
			var that = this;
			function callbackparam(res) {}
			$.ajax({
				type: 'GET',
				url: 'https://line.dupont-ex.com/getdatahis.ashx',
				contentType: 'application/json',
				data: {
					symbol: that.marketList[2],
					type: 'today'
				},
				async: false,
				dataType: 'jsonp',
				jsonp: 'callbackparam',
				success: function(data) {
					// console.log(data.TodayClosePrice);
					that.$store.commit('user/LTCUSDT', data.TodayClosePrice);
				}
			});
		},
		getNowPrice4() {
			var that = this;
			function callbackparam(res) {}
			$.ajax({
				type: 'GET',
				url: 'https://line.dupont-ex.com/getdatahis.ashx',
				contentType: 'application/json',
				data: {
					symbol: that.marketList[3],
					type: 'today'
				},
				async: false,
				dataType: 'jsonp',
				jsonp: 'callbackparam',
				success: function(data) {
					// console.log(data.TodayClosePrice);
					that.$store.commit('user/HS300USDT', data.TodayClosePrice);
				}
			});
		},
		getNowPrice5() {
			var that = this;
			function callbackparam(res) {}
			$.ajax({
				type: 'GET',
				url: 'https://line.dupont-ex.com/getdatahis.ashx',
				contentType: 'application/json',
				data: {
					symbol: that.marketList[4],
					type: 'today'
				},
				async: false,
				dataType: 'jsonp',
				jsonp: 'callbackparam',
				success: function(data) {
					// console.log(data.TodayClosePrice);
					that.$store.commit('user/IC500USDT', data.TodayClosePrice);
				}
			});
		},

		// 点击跳转otc
		side() {
			uni.switchTab({
				url: '../c2c/index'
			});
		},

		

		flags() {
			uni.getStorage({
				key: 'flag',
				success(e) {
					if (e.data) {
						console.log(321321321);
						uni.navigateBack();
						uni.setStorage({
							key: 'flag',
							data: false
						});
					}
				}
			});
		},
		slideChange() {},
		changeIndicatorDots(e) {
			this.indicatorDots = !this.indicatorDots;
		},
		changeAutoplay(e) {
			this.autoplay = !this.autoplay;
		},
		intervalChange(e) {
			this.interval = e.target.value;
		},
		durationChange(e) {
			this.duration = e.target.value;
		},
		// 跳转
		message() {
			uni.navigateTo({
				//里面是一个对象形式的参数
				url: 'message'
			});
		},
		...mapActions('quotation', ['setList'])

		
	}
};
</script>

<style lang="scss" scoped>
	.assert{
		width: 80%;
		height: 50upx;
		border: 1upx solid red;
		margin: 20upx auto;
		display: flex;
		justify-content: space-between;
		.assert-one{
			width: 100upx;
			height: 100upx;
			border-radius: 50%;
			border: 3upx solid #6495C6;
			box-shadow: 1upx solid #6495C6;
			.assert-one1{
				width: 90upx;
				height: 90upx;
				border-radius: 50%;
				background: #003B7A;
				box-shadow: 1upx solid #6495C6;
			}
		}
	}
.header > view {
	display: flex;
	align-items: center;
}
.page-section-spacing {
	width: 100%;
	height: 366upx;
}
.notice-one {
	width: 100%;
	height: 75upx;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0upx 3upx 8upx 1upx rgba(153, 153, 153, 0.09);
	border-radius: 5upx;
	// padding: 0 20upx;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 999;
}
.image-one image {
	width: 36upx;
	height: 30upx;
	align-items: center;
	justify-content: center;
	margin-left: 30upx;
}
.chargeone {
	font-size: 28upx;
	font-family: PingFang SC;
	font-weight: 400;
	color: rgba(51, 51, 51, 1);
	margin-left: 21upx;
	flex: 1;
}
.header {
	display: flex;
	height: 90upx;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 30upx;
	box-sizing: border-box;
	margin-top: 30upx;
}

.drawer-icon {
	width: 30upx;
	height: 30upx;
}
.more-icon {
	width: 29upx;
	height: 31upx;
}
.chart-icon {
	width: 37upx;
	height: 35upx;
	margin-right: 52upx;
}
.symbol-text {
	text-align: center;
	font-size: 36upx;
}
.container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.Segment {
	display: flex;
	padding: 0 30upx;
	box-sizing: border-box;
}

.Segment > text {
	height: 80upx;
	width: 20%;
	line-height: 80upx;
	text-align: center;
	border: 2px solid #e0e0e0;
	border-radius: 1px;
	box-sizing: border-box;
	color: #999999;
	font-family: PingFang-SC-Regular;
	border-right: 0;
}

.Segment > text:last-child {
	border: 2px solid #e0e0e0;
}

.coin-segment {
	padding: 0 30upx;
	margin-top: 20upx;
	border-bottom: 1px solid #e8e8e8;
}

.coin-name {
	font-size: 28px;
	font-family: PingFang-SC-Bold;
	font-weight: bold;
	color: rgba(175, 174, 174, 1);
	display: inline-block;
	padding: 0 9upx;
	text-align: center;
	position: relative;
	margin-left: 20upx;
	padding-bottom: 14upx;
}

.coin-name.actived {
	color: #457fd0;
	border-bottom: 1px solid #457fd0;
}

.coin-name.actived:after {
	content: ' ';
	position: absolute;
	height: 2px;
	width: 100%;
	bottom: 0;
	left: 0;

	background-color: #457fd0;
}

.Segment > text.actived {
	box-sizing: border-box;
	background-color: #457fd0;
	color: #fff;
}

.tab-bar {
	display: flex;
	margin: 20upx 20upx;
	border: 2upx solid #cfcfcf;
	border-radius: 10upx;
}

.tab-bar .tab-bar-item {
	text-align: center;
	height: 70upx;
	line-height: 70upx;
}

.tab-bar .active {
	background: #1478ca;
	color: #ffffff;
}

.rank {
	padding: 10px 0px;
	background: #ffffff!important;
}

.rank .title {
	padding: 10px 20px;
}

.rank .item {
	display: flex;
	padding: 20px 20px;
}

.rank .item .n {
	width: 35%;
}

.rank .item .p {
	width: 35%;
}

.rank .item .t {
	width: 30%;
	text-align: right;
}

.rank .item .t .light {
	display: block;
	width: 150px;
	color: #ffffff;
	text-align: center;
	float: right;
	border-radius: 4upx;
}

._notice {
	position: fixed;
	left: 0;
	top: 0;
	/* #ifdef H5 */
	top: 88upx;
	/* #endif */
	z-index: 9;
	width: 100%;
	background: rgba(72, 1, 1, 0.3);
	font-size: 20upx;

	height: 75upx;
	color: #ffffff;
	border-radius: 6upx;
	overflow: hidden;
	box-sizing: border-box;
}
._swiper {
	height: 75upx;
}
.swiper-item {
	line-height: 75upx;
	padding-left: 80px;
}
/deep/uni-swiper .uni-swiper-slide-frame {
	width: 100% !important;
	position: relative !important;
}

// 币种
.Kind {
	display: flex;
	justify-content: space-between;
	padding: 0 30upx;
	margin-top: 30upx;
	position: relative;
	z-index: 9999999;
	& > view {
		text-align: center;
		& > p:nth-child(1) {
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #2d2f56;
		}
		& > p:nth-child(4) {
			font-size: 26upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(140, 151, 157, 1);
		}
		.bg-up {
			color: #4cdfb0;
		}
		.bg-down {
			color: red;
		}
	}
}

// 法币
.Fiatdeal {
	background: #f7f7fb;
	width: 100%;
	display: flex;
	justify-content: space-around;
	padding-top: 20upx;
	padding-bottom: 20upx;
	position: relative;
	z-index: 9999999;
	// 左边
	.Fiatdeal-left {
		width: 45%;
		height: 150upx;
		background: #ffffff;
		display: flex;
		align-items: center;
		padding: 0 20upx;

		& > view:nth-child(1) {
			width: 50%;
			font-size: 23upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(140, 151, 157, 1);
		}
		& > view:nth-child(2) image {
			width: 177upx;
			height: 103upx;
		}
	}
	// 右边
	.Fiatdeal-right {
		width: 45%;
		height: 150upx;
		margin: 0 auto;
		& > view:nth-child(1) {
			width: 100%;
			height: 65upx;
			background: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			& > view:nth-child(1) image {
				width: 30upx;
				height: 30upx;
				display: flex;
			}
			& > view:nth-child(2) {
				font-size: 23upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(140, 151, 157, 1);
				margin-left: 20upx;
			}
		}
		& > view:nth-child(2) {
			width: 100%;
			height: 65upx;
			background: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20upx;
			& > view:nth-child(1) image {
				width: 30upx;
				height: 30upx;
				display: flex;
			}
			& > view:nth-child(2) {
				font-size: 23upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(140, 151, 157, 1);
				margin-left: 20upx;
			}
		}
	}
}
</style>
